<template>
    <view class="content">
        <view class="header">
            <image class="bg" src="../../static/credit/list-header.png" mode="widthFix"></image>
            <view class="fg nova-column nova-flex-center" style="justify-content: space-between;">
                <view class="nova-row-center" style="width: 100%;">
                    <image class="head" :src="mineIntegral.headimg"></image>
                    <text>我的积分</text>
                    <view style="flex: 1;"></view>
                    <text @click="goRule" style="padding: 0 40rpx;">使用说明</text>
                </view>
                <text style="font-size: 70rpx; position: relative; top: -34rpx;">{{mineIntegral.integral}}</text>
                <text @click="goDetail()">积分详情</text>
                <view style="height: 34rpx;"></view>
            </view>
        </view>
        <view style="margin-top: 60rpx; color: #020202; font-size: 34rpx;">
            积分排行
        </view>
        <view class="nova-list msg-list">
            <view class="nova-row-center msg" v-for="(item, index) in items" :key="index" @click.stop="goDetail(item)" :class="{'msg-last': index === items.length - 1}">
                <image class="status" v-if="index===0" src="../../static/credit/no1.png"></image>
                 <image class="status" v-if="index===1" src="../../static/credit/no2.png"></image>
                  <image class="status" v-if="index===2" src="../../static/credit/no3.png"></image>
                <text class="status" v-if="index>2">{{index+1}}</text>
                
                <text class="name">{{item.name}}</text>
                <view style="flex: 1;"></view>
                <text class="score">{{item.integral || 0}}</text>
                <view class="unit">分</view>
            </view>
        </view>
    </view>
   </view>
</template>

<script>
import uniPopup from '../../components/uni-popup/uni-popup.vue';
export default {
    components: {
        uniPopup
    },
    data() {
        return {
            items: [],
            page: 0,
            pageSize: 10,
            selectItem: undefined,
            corpPopup: false,
            role: '',
            objdata:{},//返回总数据json
            reload:false,
            mineIntegral:{},//头部信息
        };
    },
    methods: {
        async loadData() {
            let res = await this.$request.post({
                url: '/aunt/mine/myIntegral',
                data: {
                    state: this.role
                }
            });
            console.log(res);
            this.objdata = res;
            this.mineIntegral = this.objdata.mineIntegral
            if (this.reload) {
                this.items = res.integralList || [];
            } else {
                this.items = this.items.concat(res.integralList);
                if (res.integralList.length >= this.pageSize) {
                    this.page++;
                }
            }
            this.reload = false;
        },
        goDetail(e) {
            uni.navigateTo({
                url: '/pages/credit/detail?obj='+JSON.stringify(e)
            });
        },
        goCall() {}
    },
    onLoad() {
        this.role = this.$global.role
        this.loadData();
    },
    onPullDownRefresh() {
        this.reload = true;
        this.loadData();
    }
};
</script>

<style lang="scss">
page {
    background-color: #fcfcfc;
}
.content {
    padding: 34rpx;
    .header {
        width: 100%;
        height: 330rpx;
        position: relative;
        .bg {
            width: 100%;
        }
        .fg {
            position: absolute;
            color: white;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
            .head {
                width: 58rpx;
                height: 58rpx;
                margin: 34rpx;
                border-radius:12rpx;
            }
        }
    }
}
.msg-list {
    margin-top: 26rpx;
        border-radius: 12rpx;
        border: 1px solid #f0f0f0;
        box-shadow: 0 0 2rpx #f2f2f2;
    .msg {
       padding: 26rpx 26rpx;
       position: relative;
       &:after {
           @include divider(26rpx, 26rpx)
       }
       &-last {
           &:after {
               border: none;
               background: none;
           }
       }
        .status {
            width: 70rpx;
            height: 70rpx;
            font-size: 36rpx;
            color: #010101;
            text-align: center;
            line-height: 70rpx;
        }
        .name {
            font-size: 30rpx;
            color: #000000;
            margin-left: 32rpx;
        }
        .score {
            font-size: 36rpx;
            color: $uni-color-primary
        }
        .unit {
            font-size: 24rpx;
            
            color: $uni-color-primary
        }
    }
}

</style>
